
<template>
    <div>
        <el-dialog
            @close="ConfirmClose"
            :before-close="handleClose"
            title="Edit Track"
            :visible.sync="visible">

            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                     label-position="left">
                <el-row type="flex" justify="start" align="top">

                    <el-form-item label="trackId" label-width="150px" prop="trackId">
                        <el-input v-model="formData.trackId" :disabled='true' clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="chanceId" label-width="150px" prop="chanceId">
                        <el-input v-model="chanceId" :disabled='true' clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>

                </el-row>


                <el-row type="flex" justify="start" align="top">
                    <el-form-item label="businessType" label-width="150px" prop="trackBusinessType">
                        <el-select v-model="formData.trackBusinessType" placeholder="Please Enter" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.trackBusinessTypeOptions" :key="index"
                                       :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="trackDate" label-width="150px" prop="trackDate">
                        <el-date-picker v-model="formData.trackDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                        :style="{width: '100%'}" placeholder="Y-M-D" clearable></el-date-picker>
                    </el-form-item>

                </el-row>

                <el-row type="flex" justify="start" align="top">


                    <el-form-item label="memberSelf" label-width="150px" prop="trackMemberSelf">
                        <el-input v-model="formData.trackMemberSelf" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="memberThird" label-width="150px" prop="trackMemberThird">
                        <el-input v-model="formData.trackMemberThird" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>


                </el-row>


                <el-row type="flex" justify="start" align="top">
                    <el-form-item label="commMode" label-width="150px" prop="trackCommMode">
                        <el-select v-model="formData.trackCommMode" placeholder="Please Enter" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.trackCommModeOptions" :key="index"
                                       :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="address" label-width="150px" prop="trackAddress">
                        <el-select v-model="formData.trackAddress" placeholder="Please Enter" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.trackAddressOptions" :key="index"
                                       :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>

                </el-row>

                <el-row>

                    <el-form-item label="commSituation" label-width="200px" prop="trackCommSituation">
                        <el-input v-model="formData.trackCommSituation" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="commEffect" label-width="200px" prop="trackCommEffect">
                        <el-input v-model="formData.trackCommEffect" clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>

                </el-row>


            </el-form>
            <div slot="footer">
                <el-button @click="ConfirmClose">Cancel</el-button>
                <el-button type="primary" @click="handleConfirm">Confirm</el-button>
            </div>


        </el-dialog>
    </div>

</template>

<script>
export default {
    name: "EditTrackDialog",
    props: ['visible', 'close', 'callback','options',],

    data() {
        return {

            indexThis:null,

            chanceId:null,

            formData: {
                trackId: 1,
                trackBusinessType: '',
                trackDate: '',
                trackMemberSelf: '',
                trackMemberThird: '',
                trackCommMode: '',
                trackAddress: '',
                trackCommSituation: '',
                trackCommEffect: '',
            },
            rules: {
                trackBusinessType: [{
                    required: true,
                    message: '',
                    trigger: 'change'
                }],
                trackDate: [{
                    required: true,
                    message: '',
                    trigger: 'change'
                }],
                trackMemberSelf: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],

                trackMemberThird: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],

                trackCommMode: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],

                trackAddress: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],

                trackCommSituation: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],

                trackCommEffect: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],

            },


        }
    },
    methods: {

        //弹窗关闭
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?')
                // eslint-disable-next-line no-unused-vars
                .then(e => {
                    done();
                })
        },

        ConfirmClose() {
            this.$refs['elForm'].resetFields();
            this.close()
        },

        handleConfirm() {
            this.$refs['elForm'].validate(valid => {

                if (!valid) return

                    this.$axios.post(
                        '/chance/chance/updateTrack',
                        this.formData
                    ).then(res => {
                        console.log(res.data.obj)

                console.log('before close', this.formData);
                //深拷贝
                const dd = JSON.parse(JSON.stringify(this.formData))
                this.callback(dd,this.indexThis);

                this.$message({
                    message: "Track edit successfully!",
                    type: "success",
                });
                this.ConfirmClose();

            });
            })
        },

        setData(data,index,chanceId) {
            this.formData = data
            this.indexThis = index
            this.chanceId = chanceId
        },

    }


}
</script>

<style scoped>

</style>